<template>
  <div id="test">
    <!-- 表单校验 -->
    <!-- Element 组件 的表单 简单的验证 -->
    <!-- :model="user" 绑定要 验证的数据对象 :rules="userRules"绑定效验规则-->

    <!-- prop="username" 绑定要验证的数据 -->
    <!-- <el-form :model="user" :rules="userRules" label-width="100px">
      <el-form-item prop="username" label="用户名:">
        <el-input v-model="user.username" />
      </el-form-item>
      <el-form-item prop="password" label="密码:">
        <el-input v-model="user.password" />
      </el-form-item>
      <el-form-item label="确认密码:" prop="checkPass">
        <el-input v-model="user.checkPass" />
      </el-form-item>
      <el-button>登录</el-button>
    </el-form> -->

    <!-- 上传图片组件 -->
    <!-- <ImagesUpload /> -->

    <!-- 翻译的原理,国际化语言 -->
    <el-button @click="locale='zh'">中文</el-button>
    <el-button @click="locale='En'">English</el-button>
    <div class="content">
      {{ translate('sayhi') }}
    </div>
  </div>
</template>

<script>
// 翻译的原理,国际化语言
export default {
  data() {
    return {
      locale: 'zh',
      messages: {
        zh: {
          sayhi: '亲，欢迎回来！'
        },
        En: {
          sayhi: 'Welcome back, dear!'
        }
      }
    }
  },
  methods: {
    translate(str) {
      return this.messages[this.locale][str]
    }
  }
}

// 图片上传
// import { asyncRoutes } from '@/router'
// export default {
// created() {
// console.log(asyncRoutes)
// const menus = this.$store.state.user.userInfo.roles.menus
// console.log(menus)
// const res = asyncRoutes.filter(item => menus.includes(item.name))
// console.log(res)
// }
// }

// 表单验证
// export default {
//   data() {
//     const checkPassValidator = (rule, value, callback) => {
//       const isShow = value === this.user.password
//       console.log(isShow)
//       if (isShow) {
//         callback()
//       } else {
//         callback(new Error('确认密码错误'))
//       }
//     }
//     return {
//       user: {
//         username: '',
//         password: '',
//         checkPass: ''
//       },

//       userRules: {
//         username: [
//           // required: true 必须的(不能为空)
//           // message: '手机号不能为空' 提示信息
//           // trigger: 'blur' 触发条件(触发事件)
//           // validator 验证器  (可以自定义效验规则)
//           { required: true, message: '手机号不能为空', trigger: 'blur' },
//           { pattern: /^1[3-9][0-9]{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
//         ],
//         password: [
//           { required: true, message: '密码不能为空', trigger: 'blur' },
//           { min: 6, max: 16, message: '长度为6~16之间', trigger: 'blur' }
//         ],
//         checkPass: [
//           { required: true, message: '确认密码不能为空', trigger: 'blur' },
//           // validator 验证器
//           // validator: checkPassValidator
//           // 每次失焦 就调用checkPassValidator函数
//           { validator: checkPassValidator, trigger: 'blur' }
//         ]
//       }
//     }
//   },
//   methods: {
//     // checkPassValidator(rule, value, callback) {
//     //   const isShow = value === this.user.password
//     //   console.log(isShow)
//     //   if (isShow) {
//     //     callback()
//     //   } else {
//     //     callback(new Error('确认密码错误'))
//     //   }
//     // }
//   }
// }
</script>

<style lang="scss">
// #test{
//     .el-form{
//         width: 500px;
//     }
// }
</style>
